<template>
  <div class="p-2">
    <div class="grave-list">
      <div class="grave-left">
        <div class="grave-img">
          <img :src="form.imgUrl">
          <div class="tag">{{form.type==1?'私人墓':form.type==2?'名人墓':'烈士墓'}}</div>
        </div>
        <div class="grave-desc">
          <div class="name">{{form.name}}
            <el-tag type="info" style="margin-left: 5px;">{{form.buriedType==2?'双人墓':'单人墓'}}</el-tag>
          </div>
          <div class="address">地址定位：{{form.location}}</div>
          <div class="update">最近更新时间：{{form.updateTime}}</div>
          <div class="update">最近更新人员：{{form.updateByName}}</div>
        </div>
      </div>
      <div class="grave-right">
        <div class="tag-r">
          <el-tag type="primary" v-if="form.status==1">待售</el-tag>
          <el-tag type="primary" v-if="form.status==2&&form.type==1">
            预留：{{form.reservePerson}} {{form.reserveTime}}
          </el-tag>
          <el-tag type="primary" v-if="form.status==3&&form.type==1">
            已使用：{{form.deadPersonNames}} {{form.buyTime}}
          </el-tag>
          <el-tag type="primary" v-if="form.status!=1&&form.type!=1">
            已使用：{{form.martyrsName}} {{form.expirationTime}}
          </el-tag>
        </div>
      </div>
    </div>
    <h4>基础信息</h4>
    <el-form label-width="120px" disabled v-if="form.type==2">
      <el-row>
        <el-col :span="8">
          <el-form-item label="名人烈士姓名">
            {{cemeteryMartyrs.name}}
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="照片">
            <imageUpload v-model="cemeteryMartyrs.photograph" :limit="1" :isShowTip="false" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出生日期">
            {{cemeteryMartyrs.birthDate}}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="死亡日期">
            {{cemeteryMartyrs.deathDate}}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="安葬日期">
            {{cemeteryMartyrs.burialDate}}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="生平简介">
            <div v-html="cemeteryMartyrs.biography"></div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form label-width="120px" disabled v-if="form.type==1">
      <el-row v-for="(item,index) in deadPersonList" :key="index">
        <el-col :span="8">
          <el-form-item label="逝者姓名">
            {{item.name}}
            <el-tag style="margin-left: 5px;" v-if="item.spouseName">配偶：{{item.spouseName}}</el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证号">
            {{item.idCard}}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别">
            {{item.sex==1?'男':item.sex==0?'女':''}}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年龄">
            {{item.age}}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出生日期">
            {{item.birthDate}}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="死亡日期">
            {{item.deathDate}}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="照片">
            <imageUpload v-model="item.photograph" :limit="1" :isShowTip="false" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="安葬日期">
            {{item.burialDate}}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="生平简介">
            <div v-html="item.biography"></div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="relation" v-if="form.type==1">
      <h4>关联家属信息</h4>
      <el-row v-for="(item,index) in relationList" :key="index" style="margin: 5px 0; font-size: 14px;">
        <el-col :span="8">{{index+1}}、家属姓名: {{item.name}}</el-col>
        <el-col :span="8">家属电话: {{item.phone}}</el-col>
        <el-col :span="8">与逝者关系: {{item.relation}}</el-col>
      </el-row>
    </div>
    <div style="display: flex; align-items: center; justify-content: space-between;">
      <h4>关联祭扫记录</h4>
      <el-radio-group v-model="recordType" @change="changeRecord" v-if="form.type==1">
        <el-radio-button label="代祭扫" :value="1" />
        <el-radio-button label="云祭扫" :value="2" />
      </el-radio-group>
    </div>
    <el-table border :data="orderList" v-if="recordType==1&&form.type==1">
      <el-table-column label="序号" type="index" width="55" align="center" />
      <el-table-column label="订单编号" align="center" prop="id" />
      <el-table-column label="联系人" align="center" prop="contacts" />
      <el-table-column label="联系电话" align="center" prop="contactsPhone" />
      <el-table-column label="下单时间" align="center" prop="orderTime">
        <template #default="scope">
          <span>{{ parseTime(scope.row.orderTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="下单次数" align="center" prop="orderCount" />
      <el-table-column label="订购套餐" align="center" prop="offerlibationVo">
        <template #default="scope">
          {{scope.row.offerlibationVo.name}}
        </template>
      </el-table-column>
      <el-table-column label="服务地点" align="center" prop="graveVo" >
        <template #default="scope">
          {{scope.row.graveVo?scope.row.graveVo.name:''}}
        </template>
      </el-table-column>
      <el-table-column label="预定时间" align="center" prop="appointmentDate">
        <template #default="scope">
          <span>{{ parseTime(scope.row.appointmentDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实付金额" align="center" prop="amount">
        <template #default="scope">
          {{scope.row.offerlibationVo.amount}}
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" prop="orderStatus">
        <template #default="scope">
          <span v-if="scope.row.orderStatus == 1">待服务</span>
          <span v-else-if="scope.row.orderStatus == 2">服务中</span>
          <span v-else-if="scope.row.orderStatus == 3">已完成</span>
          <span v-else-if="scope.row.orderStatus == 4">已退款</span>
          <span v-else-if="scope.row.orderStatus == 5">退款中</span>
          <span v-else-if="scope.row.orderStatus == 6">退款失败</span>
        </template>
      </el-table-column>
    </el-table>
    <el-table border :data="sacrificeandrenovateList" v-if="recordType==2||form.type==2">
      <el-table-column label="序号" type="index" width="55" align="center" />
      <el-table-column label="订单编号" align="center" prop="id" />
      <el-table-column label="用户名称" align="center" prop="sacrificeandrenovateDate" />
      <el-table-column label="祭扫时间" align="center" prop="sacrificeandrenovateDate">
        <template #default="scope">
          <span>{{ parseTime(scope.row.sacrificeandrenovateDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="逝者姓名" align="center" prop="personName" />
      <el-table-column label="祭扫类型" align="center" prop="type">
        <template #default="scope">
          <span v-if="scope.row.type == 1">礼物</span>
          <span v-else-if="scope.row.type == 0">留言</span>
        </template>
      </el-table-column>
      <el-table-column label="祭扫内容" align="center" prop="context" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-tooltip content="查看" placement="top">
            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['cemetery:sacrificeandrenovate:edit']"></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top" v-if="scope.row.type == 0">
            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
              v-hasPermi="['cemetery:sacrificeandrenovate:remove']"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="querySacrificeParams.pageNum"
      v-model:limit="querySacrificeParams.pageSize" @pagination="getList" />
    <h4>维护记录</h4>
    <div style="display: flex; flex-wrap: wrap;">
      <div class="grave-list" style="width: 48%;display: inline; margin-right: 10px;" v-for="(item,index) in graveRecordList" :key="index">
        <h4>{{index+1}}、{{item.operation}}</h4>
        <div style="margin-bottom: 10px;">
          <span style="margin-right: 20px;">操作人员：{{item.createBy}}</span>
          <span>操作时间：{{item.createTime}}</span>
        </div>
        <div class="grave-left-list" v-if="item.operation=='增加墓穴'||item.operation=='修改墓穴'">
          <div class="grave-img">
            <img :src="item.imgUrl">
          </div>
          <div class="grave-desc1" style="padding-top: 10px;">
            <div class="address">{{item.name}}</div>
            <div class="address">地址定位：{{item.location}}</div>
            <div class="address" style="color: red;">预售价：{{item.price}}元</div>
          </div>
        </div>
        <div class="grave-left-list" v-if="item.operation=='预留'">
          <div class="grave-desc">
            <div class="name">预留人员：{{item.reservePerson}}</div>
            <div class="name">联系方式：{{item.reservePhone}}</div>
            <div class="name">预留原因：{{item.reserveReason}}</div>
            <div class="name">预留时间：{{item.reserveTime}}</div>
          </div>
        </div>
        <div class="grave-left-list" v-if="item.operation=='使用'">
          <div class="grave-desc">
            <div class="name">逝者名称：{{item.deadPerson}}</div>
            <div class="name">购买时间：{{item.buyTime?item.buyTime:'无'}}</div>
            <div class="name">到期时间：{{item.expirationTime?item.expirationTime:'无'}}</div>
            <div class="name">实际售价：{{item.buyPrice}}元</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Grave" lang="ts">
  import { getGrave, graveRecord } from '@/api/cemetery/grave';
  import { getMartyrs } from '@/api/cemetery/martyrs';
  import { getDeadPerson } from '@/api/cemetery/deadPerson';
  import { detaiListOrder } from '@/api/cemetery/order';
  import { listSacrificeandrenovate } from '@/api/cemetery/sacrificeandrenovate';
  import { GraveVO, GraveQuery, GraveForm } from '@/api/cemetery/grave/types';

  import { globalHeaders } from '@/utils/request';
  import { useRoute } from 'vue-router';

  const graveFormRef = ref<ElFormInstance>();

  const initFormData : GraveForm = {
    id: undefined,
    name: undefined,
    type: undefined,
    number: undefined,
    img: undefined,
    imgUrl: undefined,
    longitude: undefined,
    latitude: undefined,
    location: undefined,
    price: undefined,
    status: undefined,
    reservePerson: undefined,
    reserveReason: undefined,
    reservePhone: undefined,
    reserveTime: undefined,
    deadPersonId: undefined,
    martyrsId: undefined,
    buyTime: undefined,
    expirationTime: undefined,
    buriedTime: undefined,
    buyPrice: undefined,
    orderNum: undefined,
    buriedType: undefined,
  }
  const data = reactive<PageData<GraveForm, GraveQuery>>({
    form: { ...initFormData },
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      name: undefined,
      type: undefined,
      number: undefined,
      img: undefined,
      imgUrl: undefined,
      longitude: undefined,
      latitude: undefined,
      location: undefined,
      price: undefined,
      status: '',
      reservePerson: undefined,
      reserveReason: undefined,
      reservePhone: undefined,
      reserveTime: undefined,
      deadPersonId: undefined,
      martyrsId: undefined,
      buyTime: undefined,
      expirationTime: undefined,
      buriedTime: undefined,
      buyPrice: undefined,
      orderNum: undefined,
      params: {
      }
    },
    rules: {

    }
  });

  const { queryParams, form, rules } = toRefs(data);

  const deadPersonLength = ref(1)
  const recordType = ref(1)
  const orderList = ref([])
  const sacrificeandrenovateList = ref([])
  const total = ref(0)
  const querySacrificeParams = ref({
    pageNum: 1,
    pageSize: 10,
  })
  const graveId = ref()
  const deadPersonList = ref([])
  const relationList = ref([])
  const cemeteryMartyrs  = ref({
    name: undefined,
    spouseName: undefined,
    photograph: undefined,
    birthDate: undefined,
    deathDate: undefined,
    burialDate: undefined,
    biography: undefined,
    idCard: undefined,
    sex: undefined,
    age: undefined,
  })
  const graveRecordList = ref([])


  /** 详情 */
  const getDetail = async () => {
    const route = useRoute();
    const id : any = route.query.id;
    const _id = id
    const res = await getGrave(_id);
    Object.assign(form.value, res.data);
    if (form.value.type == 2) {
      cemeteryMartyrs.value = res.data.cemeteryMartyrs
      //getInfoDetail(res.data.martyrsId, 1)
    } else if (form.value.type == 1) {
      const deadPersonId = form.value.deadPersonId ? form.value.deadPersonId.split(',') : ''
      deadPersonLength.value = deadPersonId.length
      deadPersonList.value = res.data.deadPersonList
      if (deadPersonLength.value == 1) {
        getInfoDetail(deadPersonId[0], 1)
      } else if (deadPersonLength.value == 2) {
        getInfoDetail(deadPersonId[0], 1)
        getInfoDetail(deadPersonId[1], 2)
      }
    }
  }

  //基本信息
  const getInfoDetail = async (id : any, length) => {
    if (form.value.type == 2) {
      const res = await getMartyrs(id);
      relationList.value = res.data.deadPersonList
    } else if (form.value.type == 1) {
      if (length == 2) {
        const res = await getDeadPerson(id);
        relationList.value = relationList.value.concat(res.data.deadPersonList)
      } else if (length == 1) {
        const res = await getDeadPerson(id);
        relationList.value = res.data.deadPersonList
      }
    }
  }

  /** 查询订单列表-代祭扫 */
  const getSacrificeList = async () => {
    const params : any = {
      pageSize: querySacrificeParams.value.pageSize,
      pageNum: querySacrificeParams.value.pageNum,
      graveId: graveId.value
    }
    if (form.value.type == 2) {
      const res = await listSacrificeandrenovate(params);
      sacrificeandrenovateList.value = res.rows;
      total.value = res.total;
    } else {
      if (recordType.value == 1) {
        const res = await detaiListOrder(params);
        orderList.value = res.rows;
        total.value = res.total;
      } else if (recordType.value == 2) {
        const res = await listSacrificeandrenovate(params);
        sacrificeandrenovateList.value = res.rows;
        total.value = res.total;
      }
    }
  }

  const changeRecord = () => {
    querySacrificeParams.value.pageNum = 1
    getSacrificeList()
  }

  const getGraveRecord = async () => {
    const params : any = {
      graveId: graveId.value,
      pageSize: 999,
      pageNum: 1
    }
    const res = await graveRecord(params);
    graveRecordList.value = res.rows
  }


  onMounted(() => {
    const route = useRoute();
    graveId.value = route.query.id;
    deadPersonList.value = []
    getDetail();
    getSacrificeList()
    getGraveRecord()
  });
</script>
<style lang="scss">
  .grave-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    background: #f5f5f5;
    padding: 10px;
  }

  .grave-list {
    display: flex;
    font-size: 14px;
    padding-bottom: 10px;
    margin-bottom: 10px;

    .grave-left {
      display: flex;
      width: 60%;

      .grave-img {
        width: 180px;
        height: 110px;
        position: relative;
        margin-right: 10px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .tag {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 10;
          width: 80px;
          height: 26px;
          background: #f5f5f5;
          text-align: center;
          line-height: 26px;
        }
      }

      .grave-desc {
        height: 110px;
        padding: 5px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .name {
          display: flex;
          align-items: center;
        }
      }
    }

    .grave-right {
      padding: 10px 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;

      .price {
        color: #f00;
        margin: 10px 0;
      }
    }
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .grave-left-list {
    background: #f5f5f5;
    padding: 5px 10px;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 120px;
    .grave-img {
      width: 180px;
      height: 110px;
      position: relative;
      margin-right: 10px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .grave-desc1 {
      height: 100px;
      padding: 10px 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .grave-desc {
      height: 100px;
      padding: 20px 0;
      display: flex;
      // flex-direction: column;
      // justify-content: space-between;
      flex-wrap: wrap;
      .name{
        width: 50%;
      }
    }
  }
</style>
